<template id="temp">
  <!-- vue实例外创建 -->
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card :body-style="{ padding: '0px' }" style="height: 500px">
          <el-col style="padding: 14px; font-weight: bold" :offset="2">
            <p>组卷方式: {{ examPaperList.groupMethod }}</p>
            <p>
              试题总数: <span class="active">{{ sumQuestion }}</span>
            </p>
            <p>
              试卷总分: <span class="active">{{ sumScoreOfPaper }}</span>
            </p>
          </el-col>
          <el-col style="padding: 14px; font-weight: bold" :offset="3">
            <el-button type="primary" style="width: 75%" @click="savePaper()"
              >保存试卷</el-button
            >
          </el-col>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px">
            <div id="bg" style="margin-top: 4px; margin: 0; padding-top: 14px">
              <el-row :gutter="20">
                <el-col :span="12" style="font-weight: bold; padding: 14px">
                  <el-form
                    ref="examPaperList"
                    :rules="rules"
                    :model="examPaperList"
                    label-width="80px"
                  >
                    <el-form-item label="试卷名称" prop="paperName">
                      <el-input
                        readonly
                        v-model="examPaperList.paperName"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="试卷用途" prop="usefor">
                      <el-select
                        disabled
                        clearable
                        required
                        v-model="examPaperList.usefor"
                        placeholder="请选择试卷用途"
                      >
                        <el-option
                          label="测评试卷"
                          value="测评试卷"
                        ></el-option>
                        <el-option
                          label="模拟试卷"
                          value="模拟试卷"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12" style="font-weight: bold; padding: 50px">
                  <el-col :offset="1">
                    <el-dropdown>
                      <el-button type="primary">
                        添加题目<i
                          class="el-icon-arrow-down el-icon--right"
                        ></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(item, index) in options"
                          :key="index"
                        >
                          <el-button type="text" @click="opt(item.label)">{{
                            item.label
                          }}</el-button>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-col>
              </el-row>
            </div>
            <div style="font-weight: bold; font-size: 22px">题目列表</div>

            <!-- 展示数据 -->
            <el-row
              type="flex"
              justify="center"
              :gutter="24"
              style="padding: 14px; margin: 0"
            >
              <!-- 单选题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="单选题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="6" :offset="3" style="padding: 14px">
                    <el-button @click="opt('单选题')" icon="el-icon-plus"
                      >添加题目</el-button
                    >
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in radioQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      v-if="item.type == '单选题'"
                      style="list-style-type: upper-alpha"
                    >
                      <li
                        v-for="(answer, index) in item.questionOption"
                        :key="index"
                        :class="{ active: answer.rightAnswer === 'y' }"
                      >
                        {{ answer.context }}
                      </li>
                    </ul>
                  </el-col>
                  <el-col :span="4" :offset="0">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除试卷上的这道题目"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delPaper(index, '单选题')"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                </el-row>

                <!-- card body -->
              </el-card>
              <!-- 多选题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="多选题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="6" :offset="3" style="padding: 14px">
                    <el-button @click="opt('多选题')" icon="el-icon-plus"
                      >添加题目</el-button
                    >
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in checkQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'y'"
                    >
                      <li style="color: aqua">A.正确</li>
                      <li>B.错误</li>
                    </ul>
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'n'"
                    >
                      <li>A.正确</li>
                      <li style="color: aqua">B.错误</li>
                    </ul>
                  </el-col>
                  <el-col :span="4" :offset="0">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除试卷上的这道题目"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delPaper(index, '多选题')"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 判断题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="判断题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="6" :offset="3" style="padding: 14px">
                    <el-button @click="opt('判断题')" icon="el-icon-plus"
                      >添加题目</el-button
                    >
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in rightQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'y'"
                    >
                      <li style="color: aqua">A.正确</li>
                      <li>B.错误</li>
                    </ul>
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'n'"
                    >
                      <li>A.正确</li>
                      <li style="color: aqua">B.错误</li>
                    </ul>
                  </el-col>
                  <el-col :span="4" :offset="0">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除试卷上的这道题目"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delPaper(index, '判断题')"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 填空题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="填空题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="6" :offset="3" style="padding: 14px">
                    <el-button @click="opt('填空题')" icon="el-icon-plus"
                      >添加题目</el-button
                    >
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in completionQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <!-- 填空题 -->
                    <ul
                      v-if="item.type == '填空题'"
                      style="list-style-type: none"
                    >
                      <li>答：{{ item.questionOption[0].context }}</li>
                    </ul>
                  </el-col>
                  <el-col :span="4" :offset="0">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除试卷上的这道题目"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delPaper(index, '填空题')"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 问答题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="简答题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                  <el-col :span="6" :offset="3" style="padding: 14px">
                    <el-button @click="opt('简答题')" icon="el-icon-plus"
                      >添加题目</el-button
                    >
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in shortQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <!-- 问答题 -->
                    <ul
                      v-if="item.type == '简答题'"
                      style="list-style-type: none"
                    >
                      <li>答：{{ item.questionOption[0].context }}</li>
                    </ul>
                  </el-col>
                  <el-col :span="4" :offset="0">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="删除试卷上的这道题目"
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        @click="delPaper(index, '简答题')"
                      ></el-button>
                    </el-tooltip>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 添加题目页面 -->
    <el-dialog title="添加题目" :visible.sync="dialogFormVisible" width="55%">
      <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="选择题库">
          <el-select
            clearable
            v-model="quesBankName"
            filterable
            placeholder="请选择题库"
            @change="searchQues()"
          >
            <el-option
              v-for="item in libraryList"
              :key="item.id"
              :label="item.quesBankName"
              :value="item.quesBankName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="searchData.ent.type" disabled>
            <el-option label="题目类型" value=""></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 题目列表 -->
      <el-table
        ref="multipleTable"
        :data="questionList.list"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          width="80px"
          type="selection"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          label="试题类型"
          width="100px"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column
          label="试题内容"
          width="350px"
          align="center"
          header-align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span trigger="hover" placement="top">
              {{ scope.row.question }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          header-align="center"
          width="170px"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat("yyyy-MM-dd") }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageparm.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageparm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparm.total"
        background
      >
      </el-pagination>
      <!-- 以下 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addQuestionToNewList()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<!-- 调用   <mycom></mycom> -->
<script>
export default {
  name: "paperAdd",
  data() {
    return {
      value: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 试题总数
      sumQuestion: 0,
      // 试卷总分
      sumScoreOfPaper: 0,
      options: [
        {
          value: "1",
          label: "单选题",
        },
        {
          value: "2",
          label: "多选题",
        },
        {
          value: "3",
          label: "判断题",
        },
        {
          value: "4",
          label: "填空题",
        },
        {
          value: "5",
          label: "简答题",
        },
      ],
      // 多条件查询
      searchData: {
        currentPage: 1,
        pageSize: 10,
        ent: {
          type: "",
        },
      },
      // 查询条件，题库名
      quesBankName: "",
      // 题目列表
      questionList: [],
      // 题库列表
      libraryList: [],
      // 添加的题目数据，
      multipleSelection: [],
      // 试卷上的题目数据，准备出现在试卷上的题目
      paperQuestionList: [],
      // 单选题
      radioQues: [],
      // 多选题
      checkQues: [],
      // 判断题
      rightQues: [],
      // 填空题
      completionQues: [],
      // 简答题
      shortQues: [],
      // 存所有题目id
      quesIdList: [],
      // 试卷内容数据
      paperContent: {
        id: "",
        paperName: "", //试卷名称
        groupMethod: "", //组卷方式
        usefor: "", //用途
        url: "", //预览地址
        hasShortAnswer: 0, //是否有问答题
        totalGrade1: 0, //单选总分数
        totalGrade2: 0, //多选总分数
        totalGrade3: 0, //判断总分数
        totalGrade4: 0, //	填空总分数
        totalGrade5: 0, //	简答总分数
        defaultGrade1: 6, //	单选默认分数
        defaultGrade2: 6, //	多选默认分数
        defaultGrade3: 6, //	判断默认分数
        defaultGrade4: 6, //	填空默认分数
        defaultGrade5: 20, //简答默认分数
        nums1: 0, //	单选题数
        nums2: 0, //	多选题数
        nums3: 0, //	判断题数
        nums4: 0, //	填空题数
        nums5: 0, //	简答题数
        // creatorId: "", //	创建者
        createTime: "", //	创建时间
        updateTime: "", //	更新时间
        // isdel: "", //	是否被弃用
      },
      // 分页
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 试卷对象
      paperObject: {
        id: "",
        paperName: "",
        groupMethod: "",
        usefor: "",
      },
      // 表单验证
      rules: {
        paperName: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        usefor: [
          { required: true, message: "请选择试卷用途", trigger: "change" },
        ],
      },
    };
  },
  props: ["examPaperList"],
  methods: {
    // 分页
    pageChange() {
      this.searchData.currentPage = this.pageparm.currentPage;
      this.searchData.pageSize = this.pageparm.pageSize;
      // this.questionList.total = this.pageparm.total;
    },
    // 集合去重
    noRepeat(arr) {
      const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    // 题目排序
    sortQues() {
      // console.log("排序事件之前", this.paperQuestionList);
      // 给大集合排序
      this.paperQuestionList = [];
      if (this.radioQues != null && this.radioQues != "") {
        this.radioQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.checkQues != null && this.checkQues != "") {
        this.checkQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.rightQues != null && this.rightQues != "") {
        this.rightQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.completionQues != null && this.completionQues != "") {
        this.completionQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.shortQues != null && this.shortQues != "") {
        this.shortQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      }
      this.paperQuestionList = this.noRepeat(this.paperQuestionList);
      // console.log("排序事件之后", this.paperQuestionList);
      this.getQuestionId(); // 获取所有题目id
    },
    // 计算试卷内容属性
    countPaper() {
      // console.log("计算事件", this.paperQuestionList);
      // 计算
      // 先重置数据
      this.radioQues = [];
      this.checkQues = [];
      this.rightQues = [];
      this.completionQues = [];
      this.shortQues = [];
      this.sumQuestion = 0;
      this.sumScoreOfPaper = 0;
      this.paperContent.nums1 = 0;
      this.paperContent.nums2 = 0;
      this.paperContent.nums3 = 0;
      this.paperContent.nums4 = 0;
      this.paperContent.nums5 = 0;
      this.paperContent.totalGrade1 = 0;
      this.paperContent.totalGrade2 = 0;
      this.paperContent.totalGrade3 = 0;
      this.paperContent.totalGrade4 = 0;
      this.paperContent.totalGrade5 = 0;
      this.paperQuestionList.forEach((paper) => {
        if (paper.type === "单选题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums1++;
          this.radioQues.push(paper);
        }
        if (paper.type === "多选题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums2++;
          this.checkQues.push(paper);
        }
        if (paper.type === "判断题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums3++;
          this.rightQues.push(paper);
        }
        if (paper.type === "填空题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums4++;
          this.completionQues.push(paper);
        }
        if (paper.type === "简答题") {
          this.sumQuestion++; // 总题数
          this.paperContent.hasShortAnswer = 1;
          this.paperContent.nums5++;
          this.shortQues.push(paper);
        }
      });
      // console.log("计算事件之后",this.paperQuestionList);
      // this.sortQues();
      this.paperContent.totalGrade1 =
        this.paperContent.nums1 * this.paperContent.defaultGrade1;
      this.paperContent.totalGrade2 =
        this.paperContent.nums2 * this.paperContent.defaultGrade2;
      this.paperContent.totalGrade3 =
        this.paperContent.nums3 * this.paperContent.defaultGrade3;
      this.paperContent.totalGrade4 =
        this.paperContent.nums4 * this.paperContent.defaultGrade4;
      this.paperContent.totalGrade5 =
        this.paperContent.nums5 * this.paperContent.defaultGrade5;
      // 总分
      this.sumScoreOfPaper =
        this.paperContent.totalGrade1 +
        this.paperContent.totalGrade2 +
        this.paperContent.totalGrade3 +
        this.paperContent.totalGrade4 +
        this.paperContent.totalGrade5;
    },
    // 获取所有题目id
    getQuestionId() {
      this.quesIdList = [];
      this.paperQuestionList.forEach((ques) => {
        this.quesIdList.push(ques.id);
      });
      // console.log(this.quesIdList);
    },
    // 保存试卷
    savePaper() {
      console.log("保存试卷",this.paperQuestionList);
      this.$refs["examPaperList"].validate((valid) => {
        if (valid) {
          this.countPaper(); // 计算试卷内容属性
          this.getQuestionId(); // 获取所有题目id
          this.paperContent.paperName = this.examPaperList.paperName;
          this.paperContent.groupMethod = this.examPaperList.groupMethod;
          this.paperContent.usefor = this.examPaperList.usefor;
          this.$axios
            .post("/api/paper/addPaper", {
              examPaper: JSON.stringify(this.paperContent) + "",
              quesIdList: JSON.stringify(this.quesIdList) + "",
            })
            .then((res) => {
              this.paperQuestionList = [];
              console.log(res);
              this.$message({
                type: "success",
                message: "保存成功",
              });
              this.$parent.findAllPaper();
            })
            .catch((err) => {
              this.paperQuestionList = [];
              this.$message({
                type: "error",
                message: "保存失败",
              });
              this.$parent.findAllPaper();
            });
        } else {
          return false;
        }
      });
    },

    // 删除已添加的题目的方法
    delPaper(index, type) {
      // console.log("删除", index, type);
      if (type === "单选题") {
        // this.radioQues.splice(index, 1);
        this.paperQuestionList.splice(index, 1);
      } else if (type === "多选题") {
        // this.checkQues.splice(index, 1);
        this.paperQuestionList.splice(this.radioQues.length + index, 1);
      } else if (type === "判断题") {
        // this.rightQues.splice(index, 1);
        this.paperQuestionList.splice(this.radioQues.length + this.checkQues.length + index, 1);
      } else if (type === "填空题") {
        // this.completionQues.splice(index, 1);
        this.paperQuestionList.splice(this.radioQues.length + this.checkQues.length + this.rightQues.length + index, 1);
      } else if (type === "简答题") {
        // this.shortQues.splice(index, 1);
        this.paperQuestionList.splice(this.radioQues.length + this.checkQues.length + this.rightQues.length + this.completionQues.length + index, 1);
      }
      this.radioQues = this.noRepeat(this.radioQues);
      this.checkQues = this.noRepeat(this.checkQues);
      this.rightQues = this.noRepeat(this.rightQues);
      this.completionQues = this.noRepeat(this.completionQues);
      this.shortQues = this.noRepeat(this.shortQues);
      // console.log("单选题", this.radioQues);
      // this.paperQuestionList.splice(index, 1);
      this.countPaper(); // 计算试卷内容属性
      // console.log("删除事件", this.paperQuestionList);
      this.getQuestionId(); // 获取所有题目id
    },

    // 触发下拉框事件
    searchQues() {
      // console.log(this.searchData.ent.quesBankName);
      this.opt(this.searchData.ent.type);
    },

    // 选择题目
    opt(val) {
      // console.log("问题id", this.quesIdList);
      if (this.searchData.ent.type == val) {
        this.pageChange();
        // this.searchData.ent.type = "";
      } else {
        this.quesBankName = "";
        this.pageparm.currentPage = 1;
        this.pageparm.pageSize = 10;
        this.searchData.ent.type = val;
      }
      this.dialogFormVisible = true;
      // console.log(this.quesIdList);
      this.$axios
        .post(
          "/api/question/findQuestionAndAnswerByTypeAndLibrary",
          {
            questionPageDTO: JSON.stringify(this.searchData),
            quesIdList: JSON.stringify(this.quesIdList),
          },
          {
            params: { quesBankName: this.quesBankName },
          }
        )
        .then((res) => {
          // console.log("题目信息", res);
          this.questionList = res.data.data;
          this.pageparm.total = this.questionList.total;
          this.findLibrary();
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "获取题目列表失败",
          });
        });
    },
    // 获取题库列表
    findLibrary() {
      this.$axios
        .post("/api/library/findLibraryList")
        .then((res) => {
          // console.log(res);
          this.libraryList = res.data.data;
        })
        .catch((err) => {});
    },
    // 添加题目暂时存放在这里
    addQuestionToNewList() {
      this.dialogFormVisible = false;
      this.multipleSelection.forEach((val) => {
        this.paperQuestionList.push(val);
      });
      this.multipleSelection = [];
      this.radioQues = [];
      this.checkQues = [];
      this.rightQues = [];
      this.completionQues = [];
      this.shortQues = [];
      this.countPaper(); // 计算试卷内容属性
      this.getQuestionId(); // 获取所有题目id
      // console.log("添加事件", this.paperQuestionList);
    },
    // 以上为添加
    // ======================================================================
    // ======================================================================

    // ======================================================================
    // ======================================================================
    // ======================================================================
    // 工具方法
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageparm.pageSize = val;
      this.opt(this.searchData.ent.type);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageparm.currentPage = val;
      this.opt(this.searchData.ent.type);
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = [];
      val.forEach((v) => {
        this.multipleSelection.push(v);
      });
    },
  },
  // 局部过滤器
  filters: {
    dateFormat(str, pattern = "") {
      let date = new Date(str);
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      if (pattern.toLowerCase() == "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else {
        let hour = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();

        return `${year}-${month}-${day} ${hour}:${m}:${s}`;
      }
    },
  },
};
</script>



<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
#bg {
  background: #eaeaea;
}
.el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all 0.5s;
}

/* ul li {
  list-style-type: upper-alpha;
} */
.active {
  color: #409eff;
}

/* ======================================= */
/* .qu-content div{
    line-height: 30px;
  }

  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }

  .card-title{
    background: #eee;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
  }
  .card-line{
    padding-left: 10px
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }

  /* /deep/ */
/* .el-radio, .el-checkbox{
    padding: 9px 20px 9px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }

  .is-checked{
    border: #409eff 1px solid;
  }

  .el-radio img, .el-checkbox img{
    max-width: 200px;
    max-height: 200px;
    border: #dcdfe6 1px dotted;
  }

  /deep/
  /* .el-checkbox__inner {
    display: none;
  }

  /deep/
  .el-radio__inner{
    display: none;
  }

  /deep/
  .el-checkbox__label{
    line-height: 30px;
  }

  /deep/
  .el-radio__label{
    line-height: 30px;
  }  */
</style>
